<template>
    <div class="byPhone">
        <image class="logo" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" mode="widthFix" />
        <div class="form">
            <input class="ipt" v-model="userInfo.phone" type="text" placeholder="请输入手机号" />
            <input class="ipt" v-model="userInfo.password" type="text" placeholder="请输入密码" />
            <div class="forget">
                <div class="psd">忘记密码？</div>
                <div class="">短信快捷登录</div>
            </div>
            <div class="login_btn" @click="login">登录</div>
        </div>

        <div class="outher">
            其他登录方式
            <uni-icons type="right" size="20"></uni-icons>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Ajax from '@/api/user';
import { ref } from 'vue';

const userInfo = ref({
    phone: '13700000000',
    password: '111111',
});

const login = async () => {
    const result = await Ajax.reqLogin(userInfo.value);
    console.log(result);
    if (result.code == 200) {
        uni.navigateTo({
            url: `/pages/center/index`,
        });
    }
};
</script>

<style lang="scss" scoped>
.byPhone {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .logo {
        width: 246rpx;
        display: block;
        margin: 0 auto;
        margin-top: 150rpx;
    }

    .form {
        width: 700rpx;
        margin: 100rpx auto 0;
        .ipt {
            height: 80rpx;
            border-bottom: 1px solid #909399;
            margin-top: 30rpx;
        }
        .forget {
            margin-top: 40rpx;
            display: flex;
            justify-content: space-between;
            .psd {
                color: #909399;
            }
        }
        .login_btn {
            box-sizing: border-box;
            background-color: rgb(221, 26, 33);

            width: 600rpx;
            height: 90rpx;
            margin: 50rpx auto;

            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12rpx;
        }
    }

    .outher {
        margin-top: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
